<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <script src="./Promise.js"></script> -->

  <script>
    /* 写一个大文件切片上传的功能，绑定className为"fqm"的按钮 ，并且能够显示上传进度条 */
    //     var fqm = document.createElement('div');
    //     fqm.innerHTML = '<input type="file" id="file" name="file" multiple="multiple" /><br />' +
    //       '<div id="result"></div>' +
    //       '<div id="progress"></div>';
    //     document.body.appendChild(fqm);
    //     var file = document.getElementById('file');
    //     var result = document.getElementById('result');
    //     var progress = document.getElementById('progress');
    //     file.onchange = function () {
    //       var files = this.files;
    //       var len = files.length;
    //       var i = 0;
    //       var reader = new FileReader();
    //       var fileName = files[i].name;
    //       var fileSize = files[i].size;
    //       var fileType = files[i].type;
    //       var fileChunkSize = 1024 * 1024;
    //       var fileChunkCount = Math.ceil(fileSize / fileChunkSize);
    //       var fileChunkIndex = 0;
    //       var fileChunk = null;
    //       var fileChunkReader = null;
    //       var fileChunkReaderEventHandler = null;
    //       var fileChunkReaderLoadEndHandler = null;
    //       var fileChunkReaderLoadHandler = null;
    //       var fileChunkReaderProgressHandler = null;
    //       var fileChunkReaderAbortHandler = null;
    //       var fileChunkReaderErrorHandler = null;
    //       var fileChunkReaderLoadStartHandler = null;
    //       var fileChunkReaderLoadEndHandler = null;
    //       var fileChunkReaderLoadHandler = null;
    //       /* 继续 */
    //       fileChunkReaderEventHandler = function (e) {
    //         switch (e.type) {
    //           case 'loadstart':
    //             fileChunkReaderLoadStartHandler(e);
    //             break;
    //           case 'load':
    //             fileChunkReaderLoadHandler(e);
    //             break;
    //           case 'loadend':
    //             fileChunkReaderLoadEndHandler(e);
    //             break;
    //           case 'progress':
    //             fileChunkReaderProgressHandler(e);
    //             break;
    //           case 'abort':
    //             fileChunkReaderAbortHandler(e);
    //             break;
    //           case 'error':
    //             fileChunkReaderErrorHandler(e);
    //             break;
    //         }
    //       };
    //       fileChunkReaderLoadStartHandler = function (e) {
    //         console.log('fileChunkReaderLoadStartHandler');
    //       };
    //       fileChunkReaderLoadHandler = function (e) {
    //         console.log('fileChunkReaderLoadHandler');
    //       };
    //       fileChunkReaderLoadEndHandler = function (e) {
    //         console.log('fileChunkReaderLoad');
    //       }
    // /* 继续 */
    //   fileChunkReaderProgressHandler = function (e) {
    //             console.log('fileChunkReaderProgressHandler');
    //           };
    //         fileChunkReaderAbortHandler = function (e) {
    //           console.log('fileChunkReaderAbortHandler');
    //         };
    //         fileChunkReaderErrorHandler = function (e) {
    //           console.log('fileChunkReaderErrorHandler');
    //         };
    //         reader.onloadstart = fileChunkReaderEventHandler;
    //         reader.onload = fileChunkReaderEventHandler;
    //         reader.onloadend = fileChunkReaderEventHandler;
    //         reader.onprogress = fileChunkReaderEventHandler;
    //         reader.onabort = fileChunkReaderEventHandler;
    //         reader.onerror = fileChunkReaderEventHandler;
    //         reader.readAsArrayBuffer(files[i]);
    //       };



    var uploadButton = document.createElement('button');
    uploadButton.innerHTML = 'Upload';
    document.body.appendChild(uploadButton);
    var progress = document.createElement('div');
    progress.innerHTML = '0%';
    document.body.appendChild(progress);
    uploadButton.onclick = function () {
      var file = document.createElement('input');
      file.type = 'file';
      file.click();
      file.onchange = function () {
        var file = this.files[0];
        var fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);
        fileReader.onload = function () {
          var fileBuffer = this.result;
          var fileSize = fileBuffer.byteLength;
          var chunkSize = 1024 * 1024;
          var chunkCount = Math.ceil(fileSize / chunkSize);
          var chunkIndex = 0;
          var chunkUpload = function () {
            var start = chunkIndex * chunkSize;
            var end = Math.min(fileSize, start + chunkSize);
            var chunk = fileBuffer.slice(start, end);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:8080/upload', true);
            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
            xhr.setRequestHeader('Content-Range', 'bytes ' + start + '-' + (end - 1) + '/' + fileSize);
            xhr.send(chunk);
            xhr.onload = function () {
              chunkIndex++;
              progress.innerHTML = Math.floor(chunkIndex / chunkCount * 100) + '%';
              if (chunkIndex < chunkCount) {
                chunkUpload();
              }
            };
          };
          chunkUpload();
        };
      };
    };
  </script>
</body>

</html>